<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <my-father></my-father>
    </div>

    

    <template id="Father">
      <div>
        :count = "num"
        <p>父组件 {{num}}</p>
        <button @click="add">点我+</button>
        <my-son :count="num"></my-son>
      </div>
    </template>

    <template id="son">
      <div>
        子组件 {{count}}
        <!-- {{obj}} -->
        <button @click="add">点我+</button>
      </div>
    </template>

    <script>
      //父子组件传递
      // 1,在子组件标签上自定义属性,值为要传递的数据
      // 2,在子组件内容同props 属性来接收

      /* 
       // 子组件
       const son = {
        template:'#son',
       
        methods: {
           //父向子传递的数据是只读状态
          add(){
            this.count += 1;
          }
        },
         //接收父组件传送过来的内容
        props:['count'],
        
      } */

      /* 第二种写法 */
      /*    const son = {
        template:'#son',
       
        methods: {
           
          add(){
            this.count += 1;
          }
        },
         //接收父组件传送过来的内容
        //  第二种写法
        props:{
          //为了验证传递的类型 用的少
          count:Number
        },
        
      } */

      /*    第三种写法 */

      const son = {
        template: "#son",
        methods: {
            add() {
              this.count += 1;
            },
          },
        //接收父组件传送过来的内容
        //  第三种写法
        props: {
          count: {
            //必须写。验证类型
            type:Number,
            //默认值 父组件未向子组件传递值
            // 子组件仍用到了 这个props里的属性
            // 引用类型，改成函数
            
            //是否必传
            required: true,
          },

          // 引用类型有所不同
          obj: {
            type: Object,
            default:()=>{
              return{
                name:'默认名称'
              }
            }
          },
        

            

        },
      };

      // 父组件
      const Father = {
        template: "#Father",
        data() {
          return {
            num: 100,
            obj: {
              name: "嘲笑",
            },
          };
        },
        // 在父组件中 注册 子组件
        components: {
          "my-son": son,
        },
        methods: {
          add() {
            this.num += 1;
          },
        },
      };

      new Vue({
        el: "#app",
        //注册组件
        //components:{组件名称,组件内容} //局部组件写在 vue内
        components: {
          "my-father": Father,
        },
      });
    </script>
  </body>
</html>
